<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px"  v-judgeAccount="0">
      <el-form-item label="事务所编号" prop="officeNumber">
        <el-input
          v-model.trim="queryParams.officeNumber"
          placeholder="请输入事务所编号"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="事务所名称" prop="firmName">
        <el-input
          v-model.trim="queryParams.firmName"
          placeholder="请输入事务所名称"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="执业证书编号" prop="practiceCertificateNo">
        <el-input
          v-model.trim="queryParams.practiceCertificateNo"
          placeholder="请输入事务所执业证书编号"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <template v-if="toggleSearchStatus">
      <el-form-item label="事务所状态" prop="firmStatus">
        <el-select
          v-model="queryParams.firmStatus"
          placeholder="点击进行选择"
          clearable
          size="small"
          class="width220"
          @change="handleQuery"
        >
          <el-option label="正常" value="正常" />
          <el-option label="已暂停" value="已暂停" />
          <el-option label="已终止" value="已终止" />
        </el-select>
      </el-form-item>
      <el-form-item label="组织形式" prop="organizationalForm">
        <el-input
          v-model.trim="queryParams.organizationalForm"
          placeholder="请输入组织形式"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设立方式" prop="methodsOfIncorporation">
        <el-input
          v-model.trim="queryParams.methodsOfIncorporation"
          placeholder="请输入设立方式"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="事务所字号" prop="officeSignNo">
        <el-input
          v-model.trim="queryParams.officeSignNo"
          placeholder="请输入事务所字号"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="证券资格" prop="haveSecuritiesQualification">
        <el-select
          v-model="queryParams.haveSecuritiesQualification"
          placeholder="点击进行选择"
          clearable
          size="small"
          class="width220"
          @change="handleQuery"
        >
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
      </el-form-item>
      <el-form-item label="H股资格" prop="haveHShareQualification">
        <el-select
          v-model="queryParams.haveHShareQualification"
          placeholder="点击进行选择"
          clearable
          size="small"
          class="width220"
          @change="handleQuery"
        >
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
      </el-form-item>
      <el-form-item label="批准执业文号" prop="licenseNo">
        <el-input
          v-model.trim="queryParams.licenseNo"
          placeholder="请输入批准执业文号"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属省份" prop="province">
          <el-input
            v-model.trim="queryParams.province"
            placeholder="请输入所属省份"
            clearable
            size="small"
            class="width220"
            @keyup.enter.native="handleQuery"
          />
      </el-form-item>
      <el-form-item label="所属区县" prop="district">
          <el-input
            v-model.trim="queryParams.district"
            placeholder="所属区县"
            clearable
            size="small"
            class="width220"
            @keyup.enter.native="handleQuery"
          />
      </el-form-item>
      <!--<el-form-item label="批准执业日期" prop="approvedPracticeDate">
        <el-date-picker
          v-model="queryParams.approvedPracticeDate"
          size="small"
          class="width220"
          value-format="yyyy-MM-dd"
          type="date"
          range-separator="-"
          placeholder="批准执业日期"
        ></el-date-picker>
      </el-form-item>-->
      <el-form-item label="批准执业日期" prop="approvedPracticeDate">
        <el-date-picker
          v-model="approvedPracticeDate"
          size="small"
          class="width220"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="批准部门" prop="approvalDepartment">
        <el-input
          v-model.trim="queryParams.approvalDepartment"
          placeholder="请输入批准部门"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
        <el-input
          v-model.trim="queryParams.unifiedSocialCreditCode"
          placeholder="请输入统一社会信用代码"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="主任会计师/首席合伙人姓名" prop="nameOfChargePerson">
        <el-input
          v-model.trim="queryParams.nameOfChargePerson"
          placeholder="请输入主任会计师/首席合伙人姓名"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="主任会计师/首席合伙人证书编号" prop="certificateNoOfResponsity">
        <el-input
          v-model.trim="queryParams.certificateNoOfResponsity"
          placeholder="请输入主任会计师/首席合伙人证书编号"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否外省注册" prop="isRegister">

        <el-select
          v-model="queryParams.isRegister"
          placeholder="点击进行选择"
          clearable
          size="small"
          class="width220"
          @change="handleQuery"
        >
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <a @click="handleToggleSearch" style="margin-left: 8px">
          <span style="color: #1890FF; font-size:14px;">{{ toggleSearchStatus ? '收起' : '展开' }}</span>
          <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" style="color: #1890FF;"></i>
        </a>
      </el-form-item>
    </el-form>
    <div class="flexRowBetween marginBottom10">
      <div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['office:add']"
        >新增</el-button>
        <el-button
          type="success"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['office:import']"
        >导入</el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['office:export']"
        >导出</el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="templageOfficeExport"
          v-judgeAccount="0"
          v-hasPermi="['office:import']"
        >事务所总所模板导出
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="templageOfficeBranchExport"
          v-judgeAccount="0"
          v-hasPermi="['office:import']"
        >事务所分所模板导出
        </el-button>
      </div>

      <el-button
        type="primary"
        size="mini"
        @click="handleTo('/office/contact-approval')"
        v-hasPermi="['office:contact-approval']"
      >联系人修改审批列表</el-button>

    </div>

    <el-table
      ref="myTable"
      :data="dataList"
      max-height="600"
      border
      stripe
      fit
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed />
      <el-table-column v-if="colData[0].isTrue" fixed label="事务所编号" prop="officeNumber" sortable :render-header="foo" width="150"/>
      <el-table-column v-if="colData[1].isTrue" fixed label="事务所名称" prop="firmName" :show-overflow-tooltip="true" :render-header="foo" width="150"/>
      <el-table-column v-if="colData[2].isTrue" label="事务所执业证书编号" prop="practiceCertificateNo" :show-overflow-tooltip="true" sortable :render-header="foo" width="170"/>
      <el-table-column v-if="colData[3].isTrue" label="事务所状态" prop="firmStatus" :render-header="foo" width="120"/>
      <el-table-column v-if="colData[4].isTrue" label="所属省份" prop="province" :render-header="foo" width="120"/>
      <el-table-column v-if="colData[5].isTrue" label="是否有证券资格" prop="haveSecuritiesQualification" :render-header="foo" width="150"/>
      <el-table-column v-if="colData[6].isTrue" label="联系人" prop="contacts" :render-header="foo" width="120"/>
      <el-table-column v-if="colData[7].isTrue" label="批准执业文号" prop="licenseNo" sortable :render-header="foo" width="150"/>
      <el-table-column v-if="colData[8].isTrue" label="批准执业日期" prop="approvedPracticeDate" sortable :render-header="foo" width="150"/>
      <el-table-column v-if="colData[9].isTrue" label="批准部门" prop="approvalDepartment" :render-header="foo" width="120"/>
      <el-table-column v-if="colData[10].isTrue" label="是否外省注册" prop="isRegister" :render-header="foo" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.isRegister===0">
            否
          </span>
          <span v-if="scope.row.isRegister!=0">
            是
          </span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[11].isTrue" label="操作" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.row,'/office/detail')" v-hasPermi="['office:detail']">查看</el-button>
          <el-button size="mini" @click="handleUpdate(scope.row,'/office/edit')" v-hasPermi="['office:edit']" v-judgeAccount="1">编辑</el-button>
          <el-dropdown trigger="click" v-judgeAccount="0">
            <el-button class="el-dropdown-link" size="mini">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleUpdate(scope.row,'/office/edit')" v-hasPermi="['office:edit']">编辑</el-dropdown-item>
              <el-dropdown-item divided v-if="scope.row.status===3" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
             <!-- <el-dropdown-item divided @click.native="handleUpdate(scope.row)">导出</el-dropdown-item>-->
              <el-dropdown-item v-if="scope.row.firmStatus==='正常'" divided @click.native="handleUpdateStatus(scope.row,3)" v-hasPermi="['office:permission:end']">终止</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.firmStatus==='正常'" divided @click.native="handleUpdateStatus(scope.row,2)" v-hasPermi="['office:permission:stop']">暂停</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.firmStatus==='暂停' || scope.row.firmStatus==='停用'" divided @click.native="handleUpdateStatus(scope.row,1)" v-hasPermi="['office:permission:stop']">恢复</el-dropdown-item>
          <!--    <el-dropdown-item divided @click.native="resetPwd(scope.row)" v-hasPermi="['office:reset:pwd']">重置密码</el-dropdown-item>-->
              <el-dropdown-item divided @click.native="handleForbiddenCa(scope.row)" v-hasPermi="['office:reset:pwd']">禁用ca</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.isRegister===1" divided @click.native="handleUpdateEndTime(scope.row)" v-hasPermi="['office:set:time']">设置有效时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :autoScroll="false"
      @pagination="getList"
    >
      <template v-slot:popover>
        <el-popover
          placement="top-end"
          width="260"
          trigger="hover"
        >
          <!--弹出的菜单内容-->
          <div class="selectMenu">
            <el-checkbox-group v-model="colOptions">
              <el-checkbox v-for="item in colSelect" :key="item" :label="item" class="displayBlock marginBottom10"/>
            </el-checkbox-group>
          </div>
          <el-button slot="reference" size="mini" class="selectBtn">
            <i class="el-icon-menu"></i><i class="el-icon-caret-bottom"></i>
          </el-button>
        </el-popover>
      </template>
    </pagination>
<!--    事务所导入中-->
    <el-dialog
      title="事务所导入中..."
      :visible.sync="progressVisible"
      width="360px"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
      center
    >
      <div class="textAlignCenter">
        <img src="@/assets/image/import.png" alt="" width="300" height="150" class="displayBlock marginBottom20 marginAuto">
        <p>正在进行数据比对，请耐心等待...</p>
        <div class="loading1">
          <i class="demo1"></i>
          <i class="demo1"></i>
          <i class="demo1"></i>
          <i class="demo1"></i>
          <i class="demo1"></i>
        </div>
        <h4 class="fontSize20 marginTop20">75 %</h4>
      </div>
    </el-dialog>
    <!-- upload 导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload"
                 accept=".xlsx, .xls"
                 :headers="upload.headers"
                 :action="upload.url"
                 :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress"
                 :on-success="handleFileSuccess"
                 :on-error="handleFileError"
                 :on-change="handleChange"
                 :file-list="fileList"
                 :auto-upload="false"
                 :multiple="false"
                 drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    事务所导入中-->
    <el-dialog
      title="事务所导入中..."
      :visible.sync="progressVisible"
      width="360px"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
      center
    >
      <div class="textAlignCenter">
        <img src="@/assets/image/import.png" alt="" width="300" height="150" class="displayBlock marginBottom20 marginAuto">
        <p>正在进行数据导入，请耐心等待！</p>
        <div class="loading1 marginAuto marginTop10">
          <i class="demo1"></i><i class="demo1"></i><i class="demo1"></i><i class="demo1"></i><i class="demo1"></i>
        </div>
      </div>
    </el-dialog>
    <!--    事务所导入失败-->
    <el-dialog
      title="事务所导入失败"
      :visible.sync="failedVisible"
      width="360px"
      append-to-body
      center
    >
      <div class="textAlignCenter">
        <img src="@/assets/image/error.png" alt="" width="110" height="100" class="displayBlock marginBottom20 marginAuto">
        <h4 class="fontSize20 marginTop20">点击任何地方关闭弹窗</h4>
      </div>
    </el-dialog>
    <!--    事务所导入成功 提示框-->
    <el-dialog
      title="数据导入结束"
      :visible.sync="successVisible"
      width="400px"
      append-to-body
      center
    >
      <div class="textAlignCenter">
        <img src="@/assets/image/success.png" alt="" width="110" height="100" class="displayBlock marginBottom20 marginAuto">
        <p class="marginBottom10">导入成功，更新 <span class="marginLR5 colorOrange">{{ resultData.update }}</span> 条数据，新增 <span class="colorSuccess marginLR5">{{ resultData.add }}</span> 条数据</p>
        <div v-if="resultData.fail" class="failedContent">
          <p>检测到导入列表数据中，有 <span class="marginLR5 colorDanger">{{ resultData.fail }}</span>条数据导入失败</p>
          <div v-if="resultData && resultData.failureItemList && resultData.failureItemList.length>0"
               style="max-height: 200px;overflow: auto;">
            <p class="colorDanger" v-for=" item in resultData.failureItemList"
               style="text-align: content;color:red; margin:4px 0;">
              {{item}}
            </p>
          </div>
        </div>
        <h4 class="fontSize20 marginTop20">点击任何地方关闭弹窗</h4>
      </div>
    </el-dialog>

    <!-- 设置有效时间 -->
    <el-dialog
      title="设置账号有效时间"
      :visible.sync="dialogVisibleCheck"
      width="418px"
      append-to-body
    >
      <div class="dialogView">
        <el-form :model="checkForm" :rules="checkRules" ref="checkForm">
          <el-row :gutter="20">
            <el-col :span="24" class="form-wrap">
              <el-form-item label="账号结束日期:" class="alertFormItem" prop="effectTime">
                <el-date-picker
                  v-model="checkForm.effectTime"
                  size="small"
                  class="endDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择日期"
                  clearable
                ></el-date-picker>
              </el-form-item>

            </el-col>
          </el-row>
          <div class="flexRowBetween">

            <el-button style="flex: 1;" @click="publicHandleCancel('dialogVisibleCheck')">取消</el-button>
            <el-button type="primary" style="flex: 1;" @click="handleCheckForm">确定</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- end -->
  </div>
</template>

<script>
import { listOffice, exportOffice, delOffices, updateStatus, resetOfficePwd, editValidity } from "@/api/system/office";
import { getToken } from "@/utils/auth";
import {updateCaUsbkeyStatus} from "@/api/system/user";
export default {
  name: "OfficeList",
  data() {
    return {
      toggleSearchStatus: false,
      progressVisible: false, // 导入中
      failedVisible: false, // 导入失败
      successVisible: false, // 导入成功
      dialogVisibleCheck: false,
      dataList:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        practiceCertificateNo: '', // 事务所执业证书编号
        officeNumber: '', // 事务所编号
        firmName: '', // 事务所名称 100
        organizationalForm: '', // 组织形式
        methodsOfIncorporation: '', // 设立方式 20
        firmStatus: '', // 事务所状态
        officeSignNo: '', // 事务所字号
        haveSecuritiesQualification: '', // 是否拥有证券资格 2
        haveHShareQualification: '', // 是否拥有H股资格 2
        province: '', // 所属省份 20
        district: '', // 所属区县 20
        unifiedSocialCreditCode: '', // 统一社会信用代码 50
        nameOfChargePerson: '', // 负责人姓名
        certificateNoOfResponsity: '', // 主任会计师/首席合伙人证书编号 50
        licenseNo: '', // 批准执业文号 50
        //approvedPracticeDate: '', // 批准执业日期 20
        approvalDepartment: '', // 批准部门 20
        isRegister:'', // 是否外省注册 否：0 ，是：1
      },
      approvedPracticeDate:undefined,
      fileList: [], // 上传 文件列表（唯一）
      resultData: {}, // 上传后 数据结果
      // 业务数据 导入参数
      upload: {
        open: false,
        // 弹出层标题（业务导入）
        title: "事务所导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/office/importOffice",
      },
      // 已选择 的内容，即表格中显示的列
      colOptions: ['事务所编号', '事务所名称', '事务所执业证书编号', '事务所状态', '所属省份', '是否有证券资格', '联系人', '批准执业文号', '批准执业日期', '批准部门', '是否外省注册', '操作'],
      // 多选框的可选择
      colSelect: ['事务所编号', '事务所名称', '事务所执业证书编号', '事务所状态', '所属省份', '是否有证券资格', '联系人', '批准执业文号', '批准执业日期', '批准部门', '是否外省注册', '操作'],
      // isTrue属性存放列的状态
      colData: [
        { title: '事务所编号', isTrue: true },
        { title: '事务所名称', isTrue: true },
        { title: '事务所执业证书编号', isTrue: true },
        { title: '事务所状态', isTrue: true },
        { title: '所属省份', isTrue: true },
        { title: '是否有证券资格', isTrue: true },
        { title: '联系人', isTrue: true },
        { title: '批准执业文号', isTrue: true },
        { title: '批准执业日期', isTrue: true },
        { title: '批准部门', isTrue: true },
        { title: '是否外省注册', isTrue: true },
        { title: '操作', isTrue: true },
      ],
      // 添加有效时间
      checkForm: {
          effectTime:''
      },
      checkRules: {
      },
      setTimeTargetId:''
    };
  },
  beforeUpdate() {
    // 防止动态添加列时 表格乱
    this.$nextTick(() => {
      this.$refs.myTable.doLayout();
    });
  },
  watch: {
    colOptions(newVal, oldVal) {
      if (newVal) {    // 如果有值发生变化，即多选框的已选项变化
        let arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) 	// 未选中
        this.colData.filter(i => {
          if (arr.indexOf(i.title) !== -1) {
            i.isTrue = false
          } else {
            i.isTrue = true
          }
        })
      }
    }
  },
  created() {
    this.colOptions = [];
    this.colData.forEach(item => {
        if(item.isTrue){
            this.colOptions.push(item.title);
        }
    })
    this.queryParams = this.$store.getters.targetParams && JSON.stringify(this.$store.getters.targetParams)!='{}'?this.$store.getters.targetParams:this.queryParams;
    this.queryParams.pageNum = this.$store.getters.targetPageIndex && this.$store.getters.targetPageIndex !="" ? this.$store.getters.targetPageIndex: 1;
    this.getList();
    //this.checkForm.effectTime = this.getAfterFormatDate(5)
  },
  methods: {
    handleToggleSearch(){
        this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    foo(h,{column}) {
        return this.utilsFoo(h,{column})
    },
    //重置密码
    resetPwd(row){
      this.$confirm('确认重置'+row.firmName+'的账号密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetOfficePwd(row.officeId).then(res=>{
          this.$message({
            type: 'success',
            message: '密码重置成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '密码重置已取消'
        });
      });
    },
    /**禁用ca*/
    handleForbiddenCa(row) {
      this.$confirm('确认禁用'+row.firmName+'ca?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {};
        data.onlyDistinguish = row.unifiedSocialCreditCode;
        data.status = 1;
        updateCaUsbkeyStatus(data).then(res=>{
          this.$message({
            type: 'success',
            message: '禁用成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '禁用已取消'
        });
      });
    },
    /** 查询数据列表 */
    getList() {
      this.queryParams.approvedPracticeDateStartTime = this.approvedPracticeDate && this.approvedPracticeDate[0] ? this.approvedPracticeDate[0]:'';
      this.queryParams.approvedPracticeDateEndTime = this.approvedPracticeDate && this.approvedPracticeDate[1] ? this.approvedPracticeDate[1]:'';
      this.$store.commit('SET_TARGETPARAMS', this.queryParams);
      this.loading = true;
      listOffice(this.queryParams).then(
        response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.officeId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.approvedPracticeDate = [];
      this.resetForm("queryForm");
      for(var item in this.queryParams){
        this.queryParams[item] = undefined;
      }
      this.queryParams.pageSize = 10;
      this.queryParams.pageNum =1;
      this.handleQuery();
    },
    handleAdd() {
      this.$router.push({ path: '/office/add'})
    },
    handleDelete(row) {
    // 事务所系统状态,1:启用，2：停用,3：未启用（可删）,-1：已删除
      this.$confirm(
        '是否确认删除该事务所?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          delOffices(row.officeId).then(res=> {
            if(res.data === 1){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          });

        })
        .catch(function () {});

    },
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出当前页所有事务所数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportOffice(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        })
        .catch(function () {});
    },
    templageOfficeExport() {
      window.open(process.env.VUE_APP_BASE_API + "/office/officeTemplate/download");
    },
    templageOfficeBranchExport() {
      window.open(process.env.VUE_APP_BASE_API + "/office/officeBranchTemplate/download");
    },
    handleUpdate(row,path) {
        if(path.indexOf("detail") > -1 || path.indexOf("edit") > -1){
            this.$store.commit('SET_TARGETPAGEINDEX', this.queryParams.pageNum);
        }
      this.$router.push({ path: path,query:{ officeId: row.officeId }});
    },
    // 修改事务所系统状态
    handleUpdateStatus(row,status) {
      // 事务所系统状态,1:启用，2：停用,3：未启用,-1：删除
      let params = {
        officeId: row.officeId,
        status: status
      }
      updateStatus(params).then( res=> {
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '操作失败!'
        });
      });
    },
    handleTo(path) {
      this.$router.push({ path: path})
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.open = true; // 导入框展示
    },
    /** 文件上传 中 处理 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      this.upload.open = false;
      this.progressVisible = true; // 导入中
    },
    /** 文件上传 成功 处理 */
    handleFileSuccess(response, file, fileList) {
      this.progressVisible = false; // 关闭 导入中
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if(response.code !== 200){
        this.$message.error(response.msg);
        this.successVisible = false;
      }else{
        this.successVisible = true; // 导入成功
        this.resultData = response.data; // add新增，fail，failureItem,update
        this.getList();
      }

    },
    /** 文件上传 失败 处理 */
    handleFileError(response, file, fileList) {
      this.progressVisible = false; // 关闭 导入中
      this.resultData = response.data; // add新增，fail，failureItem,update
      if(response.data.code !== 200){
        this.failedVisible = true; // 导入失败
      }
    },
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
      }
    },
    /** 提交 上传 文件 */
    submitFileForm() {
      this.$refs.upload.submit();
    },
    publicHandleCancel(str){
        this[str] = false;
    },
    //  打开审核界面
    handleUpdateEndTime(row) {
        this.dialogVisibleCheck = true;
        this.setTimeTargetId = row.officeId;
        this.checkForm.effectTime = row.effectTime
    },
    handleCheckForm(){
        let self = this
        this.$refs.checkForm.validate(valid => {
            if (valid) {
                self.loading = true;
                self.checkForm.officeId = self.setTimeTargetId
                editValidity(self.checkForm).then(res=>{
                    if(res.code === 200){
                        self.dialogVisibleCheck = false;
                        self.loading = false;
                        this.$message({
                            type: 'success',
                            message: '审核提交成功!'
                        });
                        self.getList();
                    }

                }).catch(()=>{
                    self.loading = false;
                });
            }
        });
    },
  }
};
</script>
<style lang="scss" scoped>
  .app-container{
    position: relative;
  }
  /*form 表单 样式设置 start*/
  ::v-deep .el-form-item{
    margin-bottom: 10px;
  }
  ::v-deep label[for='unifiedSocialCreditCode'],
  ::v-deep label[for='nameOfChargePerson'],
  ::v-deep label[for='certificateNoOfResponsity']{
    line-height: 20px;
  }
  ::v-deep .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
  ::v-deep .el-select .el-input--suffix .el-input__inner {
    padding-right: 30px;
  }
  ::v-deep .el-date-editor .el-range-input{
    width: 62%;
  }
  /*form 表单 样式设置 end*/

  .width220{
    width: 160px;
  }
  .failedContent{
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed #ccc;
    p{
      line-height: 24px;
    }
  }

  .el-checkbox{
    display:block;
    height:20px;
    line-height:20px;
    padding:0 5px;
    margin-right:0;
    font-size:12px;
    border: 1px solid transparent;
  }
  .selectMenu{
    max-height: 500px;
    overflow: auto;
  }
  .selectBtn{
    padding: 6px;
    i:first-child{
      font-size: 20px;
      color: #adb2bd;
    }
    i:last-child{
      font-size: 16px;
      color: #eff0f3;
    }
    &:focus,&:hover{
      background: #fff;
    }
  }
  ::v-deep .el-dialog__body{
    padding-top:10px;
  }
  .endDate{
    width: calc(100% - 100px) !important;
  }
  ::v-deep .el-dialog .el-dialog__body{
    min-height:240px;
  }
</style>
